<template>
  <div class="home">
    <!-- 主要部分 start -->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in currentTab">
       
      <!-- 里面内容 start -->
      <el-table v-loading="loading" :data="listData" row-key="id" @cell-click='clickTopic'>
        <el-table-column prop="author.loginname" label="作者" width="180"></el-table-column>
        <el-table-column prop="tab" label="类别" width="180"></el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <!-- <el-table-column prop="title" label="标题"></el-table-column> -->
        <el-table-column prop="create_at" label="创建时间"> </el-table-column>
      </el-table>
      <!-- 里面内容 end -->
      
    </el-tab-pane>
  <el-pagination
     background
     @current-change="handleCurrentChange" 
     :page-size="45"
     layout="prev, pager, next"
     :total="45*15">
 </el-pagination>
  </el-tabs>
    <!-- 主要部分 end -->
    <!-- 侧边栏 start -->
<div class="home_sidebar">
    </el-card>
        <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span>无人回复的话题</span>
      </div>
      <div v-for="(item,index) in noReData" :key="item.id" class="text item noReData">
        <router-link :to="`/topic/${item.id}`">{{noReData[index].title}}</router-link>
      </div>  
    </el-card>
    <!-- 友情社区 -->
      <el-card class="box-card community">
      <div slot="header" class="clearfix">
        <span>友情社区</span>
      </div>
      <div>
        <a href=""><img src="../../assets/images/golangtc-logo.png" alt=""></a>
        <a href=""><img src="../../assets/images/phphub-logo.png" alt=""></a>
        <a href=""><img src="../../assets/images/ruby-china-20150529.png" alt=""></a>
      </div>
    </el-card>
    <!-- 二维码 -->
      <el-card class="box-card QR" >
      <div slot="header" class="clearfix">
        <span>二维码</span>
      </div>
      <div>
        <img src="../../assets/images/twoMa.png" alt="">
      </div>
    </el-card>
    </div>
    <!-- 侧边栏 end -->
  </div>
</template>

<script>
import { getDateDiff, renderTime,retryFunc} from "../../utils/utils";
import { request } from "../../network/request/request";
export default {
  data() {
    return {
      nowCurrentTab:'',/////当前显示的tab
      currentTab: [
        { label:'全部',name:'first',tab:'all'},
        { label:'精华',name:'second',tab:'good'},
        { label:'分享',name:'third',tab:'share'},
        { label:'问答',name:'fourth',tab:'ask'},
        {label:'招聘',name:'fifth',tab:'job'}
        ],
      listData:[],
      loading:false,
      activeName: 'first',  //显示高亮的那个
      noReData:[]
    };
  },

  created() {
    // 第一次获取数据打印在页面上
    retryFunc(this.fetchListData({ limit: 45, tab: this.currentTab[0].tab})
      .then((res) => {
            this.handle(res);
                  }),3);
  },

methods: {
  //获取到点击那个文章的所有详细信息
  clickTopic(val,column){
    if(column.property == 'title'){
        this.$router.push(`/topic/${val.id}`);
    }else if(column.property == 'author.loginname'){
        this.$router.push(`/user/${val.author.loginname}`);
    }
    
    
    
  },
     handleCurrentChange(val){     /////改变分页时执行的方法,点击分页页码切换
      //  console.log(val+'当前页数'); 
         retryFunc(this.fetchListData({ limit: 45,page:val,tab:this.nowCurrentTab})               
                .then((res) => {
           this.handle(res);
                }),3)
      },
     handleClick(tab) {            ///////点击tab栏切换数据
         this.nowCurrentTab=this.currentTab[tab.index].tab;
        //  console.log(this.nowCurrentTab);   
         retryFunc(this.fetchListData({ limit: 45,tab:this.currentTab[tab.index].tab})               
                .then((res) => {
                  this.handle(res);
                }),3)
      },

    fetchListData:function(params) { /////数据请求
        return request({
                url: "topics",
                params: params,
              })
    },
    handle(res){                    /////数据处理
     this.listData = res.data.data.map((v) =>
                    Object.assign(v, {
                      create_at: getDateDiff(renderTime(v.create_at)),
                    })
                  );
                  this.noReData = this.listData.filter((v) => v.reply_count == 0).splice(0,5);
                  this.$store.commit("fetchNoReData",this.noReData)
                  
    },
    
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>